<template>
	<view class="orderDetails" v-if="order_msg">
		<view class="bgBox d_flex">
			<view class="icon">
				<text v-if="order_msg.pintuan_state == '10'" class="custom-icon custom-icon-dengdai"></text>
				<text v-else-if="(order_msg.pintuan_state == '11' || order_msg.order_type == '10') && order_msg.order_state == '11'" class="custom-icon custom-icon-daifahuo"></text>
				<text v-else-if="order_msg.order_state == '12'" class="custom-icon custom-icon-daishouhuofuben"></text>
				<text v-else-if="order_msg.pintuan_state == '12'" class="custom-icon custom-icon-tishishibai"></text>
				<text v-else class="custom-icon custom-icon-wancheng"></text>
			</view>
			<view class="con">
				<view v-if="order_msg.pintuan_state == '10'" class="title">拼团中</view>
				<view v-else-if="(order_msg.pintuan_state == '11' || order_msg.order_type == '10') && order_msg.order_state == '11'" class="title">待发货</view>
				<view v-else-if="order_msg.order_state == '12'" class="title">待收货</view>
				<view v-else-if="order_msg.pintuan_state == '12'" class="title">未拼中</view>
				<view v-else class="title">已收货</view>
			</view>
		</view>
		
		<view class="address flex_conter mTop2">
			<view class="iconBox flex_conter_c"><u-icon class="icon" name="map-fill"></u-icon></view>
			<view class="content">
				<view class="text">
					<text class="uname">{{order_msg.receiver_name}}</text>
					<text class="phone">{{order_msg.receiver_phone}}</text>
				</view>
				<view class="addressInfo">{{order_msg.address_province}} {{order_msg.address_city}} {{order_msg.address_unit}} {{order_msg.address_detail}}</view>
			</view>
		</view>
		
		<view class="address flex_conter mTop2" v-if="order_msg.express_state == '20' || order_msg.express_state == '30'">
			<view class="iconBox flex_conter_c"><u-icon class="icon" custom-prefix="custom-icon" name="wuliu"></u-icon></view>
			<view class="content">
				<view class="text">
					<text class="uname">快递公司：{{order_msg.express_company}}</text>
				</view>
				<view class="addressInfo" @click="copyExpressOrderNo">快递单号：{{order_msg.express_order_no}}</view>
			</view>
		</view>
		
		<view class="commodity mTop2">
			<view class="commodityBox">
				<u-image width="180rpx" height="180rpx" :src="order_msg.goods_main_img" border-radius="7"></u-image>
				<view class="info">
					<view class="title">{{order_msg.goods_title}}</view>
					<view class="sort">[<block v-for="(item,index) in order_msg.choose_spec_list" :key="index"><block v-if="index > 0">,</block>{{item.name}}:{{item.val}}</block>]</view>
					<view class="num flex_space">
						<view class="price"><text>￥</text>{{order_msg.goods_price}}</view>
						<view class="pieces"><text>x</text>{{order_msg.goods_num}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="infoBox mTop2">
			<view class="item" @click="copyOrderNo">订单编号：{{order_msg.order_no}}</view>
			<view class="item">下单时间：{{order_msg.order_time}}</view>
		</view>
		
		<view class="orderInfo mTop2">
			<view class="item flex_space_b">
				<view class="left">商品金额</view>
				<view class="right">
					<text class="redText">￥{{order_msg.goods_price}}</text>
				</view>
			</view>
			<view class="item flex_space_b">
				<view class="left">运费</view>
				<view class="right">
					<text>包邮</text>
					<!-- <text class="redText">￥10</text> -->
				</view>
			</view>
			<view class="item flex_space_b" v-if="order_msg.use_score > 0">
				<view class="left">积分抵扣</view>
				<view class="right">
					<text v-if="order_msg.use_score == 0">无积分</text>
					<text class="redText" v-else>-￥{{order_msg.use_score}}</text>
				</view>
			</view>
		</view>
		
		<view class="bottomBox" v-if="order_msg.order_state == '12'">
			<button type="primary" class="btn" hover-class="none" @click="receiveGoods">确认收货</button>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				order_no:"",
				order_msg:null
			}
		},
		onLoad(options) {
			this.order_no = options.order_no;
			this.loadData();
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				util.requestPost("api.php/user/orderDetail", {order_no:this.order_no}, function(res) {
					that.order_msg = res.data.order_msg;
				},true);
			},
			copyOrderNo(){
				uni.setClipboardData({
					data:this.order_msg.order_no,
					success() {
						util.toast("复制成功！");
					}
				})
			},
			copyExpressOrderNo(){
				uni.setClipboardData({
					data:this.order_msg.express_order_no,
					success() {
						util.toast("复制成功！");
					}
				})
			},
			// 确认收货
			receiveGoods(){
				let that = this;
				uni.showModal({
				  title: '确认已经收到货物？',
				  success (res) {
					if (res.confirm) {
						util.requestPost("api.php/user/receiveGoods", {order_no:that.order_no}, function(res) {
							const pages = getCurrentPages(); //获取页面栈
							const beforePage = pages[pages.length - 2]; //前一个页面
							beforePage.$vm.updateOrderState();   //前一个页面方法
							util.toast("操作成功！");
							setTimeout(function(){
								uni.navigateBack();
							}, 1000);
						});
					}
				  }
				});
			}
		}
	}
</script>

<style scoped>
.orderDetails {
	min-height: 100%;
	background-color: var(--bgColor);
	padding-bottom: 120rpx;
}
.bgBox {
	padding: 50rpx;
	background: var(--btnBgColor);
	color: #FFFFFF;
}
.bgBox .icon .custom-icon {
	font-size: 40rpx;
}
.bgBox .con {
	margin-left: 20rpx;
}
.bgBox .title {
	font-size: 32rpx;
}

.address {
	padding: 28rpx 32rpx;
	background-color: #FFFFFF;
}
.address .iconBox {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: var(--primaryColor);
}
.address .iconBox .icon {
	color: #FFFFFF;
	font-size: 40rpx;
}
.address .content {
	flex: 1;
	padding: 0 20rpx 0;
}
.address .content .addressInfo {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	font-size: 28rpx;
	color: #333;
}
.address .content .text {
	margin-bottom: 10rpx;
}
.address .content .text .uname {
	font-size: 28rpx;
	color: #333333;
	margin-right: 10rpx;
}
.address .content .text .phone {
	font-size: 24rpx;
	color: #999;
}

.commodity {
	background-color: #FFFFFF;
}
.commodity .merchant {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}
.commodity .merchant .merchantName {
	margin-left: 10rpx;
	font-size:28rpx;
	font-weight:bold;
}
.commodity .commodityBox {
	display: flex;
	padding: 30rpx;
}
.commodity .commodityBox .info {
	flex: 1;
	margin-left: 22rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.commodity .commodityBox .info .title {
	font-size:28rpx;
	font-weight: 600;
	color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	
}
.commodity .commodityBox .info .price {
	color: var(--primaryColor);
	font-size: 28rpx;
	font-weight: 600;
}
.commodity .commodityBox .info .price text {
	font-size: 24rpx;
}
.commodity .commodityBox .info .num .pieces {
	font-size: 28rpx;
	color: #666666;
}
.commodity .commodityBox .info .num .pieces text {
	font-size: 24rpx;
}

.infoBox {
	padding: 30rpx;
	background-color: #FFFFFF;
}
.infoBox .item {
	margin-bottom: 20rpx;
}
.infoBox .item:last-of-type {
	margin-bottom: 0;
}

.orderInfo {
	padding: 30rpx;
	background-color: #FFFFFF;
}
.orderInfo .item {
	margin-bottom: 20rpx;
}
.orderInfo .item:last-of-type {
	margin-bottom: 0;
}
.orderInfo .item .right {
	color: #999999;
}

.bottomBox {
	height: 100rpx;
	background-color: #FFFFFF;
	padding: 0 32rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.bottomBox .btn {
	width:220rpx;
	height: 68rpx;
	line-height: 68rpx;
	font-size: 28rpx;
	background: var(--btnBgColor);
	border-radius:40rpx;
	color: #FFFFFF;
	margin: 0 0 0 20rpx;
}
</style>
